<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
        $(function () {
            // On document ready, call visualize on the datatable.
            $(document).ready(function() {
                Highcharts.visualize = function(table, options) {
                    // the categories
                    options.xAxis.categories = [];
                    $('tbody th', table).each(function(i) {
                        options.xAxis.categories.push(this.innerHTML);
                    });

                    // the data series
                    options.series = [];
                    $('tr', table).each(function(i) {
                        var tr = this;
                        $('th, td', tr).each(function(j) {
                            if (j > 0) { // skip first column
                                if (i == 0) { // get the name and init the series
                                    options.series[j - 1] = {
                                        name: this.innerHTML,
                                        data: []
                                    };
                                } else { // add values
                                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                                }
                            }
                        });
                    });

                    var chart = new Highcharts.Chart(options);
                }

                var table = document.getElementById('datatable'),
                        options = {
                            chart: {
                                renderTo: 'container',
                                type: 'column'
                            },
                            title: {
                                text: 'Biểu đồ biến động thị trường'
                            },
                            xAxis: {
                            },
                            yAxis: {
                                title: {
                                    text: 'Số lượng (cái)'
                                }
                            },
                            tooltip: {
                                formatter: function() {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                            this.y + ' ' + this.x.toLowerCase();
                                }
                            }
                        };

                Highcharts.visualize(table, options);
            });

        });
    </script>
</head>
<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="content">
    <table id="datatable">
        <thead>
        <tr>
            <th></th>
            <th>Tháng 10</th>
            <th>Tháng 11</th>
        </tr>
        </thead>
        <tbody>
        <?php if (isset($data['chi_tiet'])) { ?>
            <?php foreach ($data['chi_tiet'] as $key => $de_c) { ?>
                <?php
               $ten = $de_c->ten_thanh_pham;
                $so_luong = $de_c->so_luong;
                $gia_tien = $de_c->gia_tien;
                ?>
                    <tr>
               <th><a href="http://google.com"><?php echo $ten ?></a></th>
               <td><?php echo $so_luong ?></td>
                <td><?php echo $gia_tien/100 ?></td>
                </tr>
                <?php } ?>
            <?php } ?>
        </tbody>
    </table>
</div>
</body>
</html>
